<script setup lang="ts">
const router = useRouter()
const route = useRoute()
const username = ref('')
const sex = ref('')
const birthday = ref('')
const birthday2 = ref('')
const wxbzzl = ref('')
const lnys = ref('')
const rglm = ref('')
const tywh = ref('')
const myq_text = ref('')
const nameList = ref()
const fengshui_list = ref()

const columns = ref([{
  key: 'bz',
  label: '八字',
  class: 'bg-[#eedec7] py-3'
}, {
  key: 'nz',
  label: '年柱',
  class: 'bg-[#eedec7] py-3'
//   class: 'italic'
}, {
  key: 'yz',
  label: '月柱',
  class: 'bg-[#eedec7] py-3'
}, {
  key: 'rz',
  label: '日柱',
  class: 'bg-[#eedec7] py-3'
}, {
  key: 'sz',
  label: '时柱',
  class: 'bg-[#eedec7] py-3'
}])

const items = ref([{
  bz:'天干',
  nz: '',
  yz: '',
  rz: '',
  sz: '',
  class: 'bg-[#fcf5e5]'
}, {
  bz: '地支',
  nz: '',
  yz: '',
  rz: '',
  sz: '',
  class: 'bg-[#eedec7]'
}])
const getResult = async() => {
  try {
    const oid = route.query.oid;
    if (!oid) {
        router.push('/fengshui')
    }
    // const { data: res } = await useFetchPost('/api/Fengshui/fengshuiResult?key='+new Date().getTime(), {
    //     oid: oid,
    // });
    const { data: res } = await useFetchPost('/api/Fengshui/fengshuiResult', {
        oid: oid,
    });

    username.value = res.value?.data?.data?.name;
    if (res.value?.data?.data?.gender == '1') {
        sex.value = '男性'
    } else {
        sex.value = '女性'
    }
    birthday.value = res.value?.data?.data?.y+'年'+res.value?.data?.data?.m+'月'+res.value?.data?.data?.d+'日'+res.value?.data?.data?.h+'时';

    birthday2.value = res.value?.data?.data?.lDate.split(' ')[0];

    //<p>本命属<{$cookies.sx}>，<{$nayin.0.layin}>命。<{$wang.wang}><{$wang.que}>；日主天干为<{$nayin.0.layin}><{$wang.wang}><{$wang.que}><{$cookies.bazi.4}>，生于<{$cookies.siji}>季。</p>
    wxbzzl.value = '本命属'+res.value?.data?.cookies?.sx+'，'+res.value?.data?.info?.nayin[0]?.layin+'命。日主天干为'+res.value?.data?.info?.nayin[0]?.layin+res.value?.data?.cookies?.bazi[4]+'，生于'+res.value?.data?.cookies?.siji+'季。';

    //  <td><{$return.user.bazi.0}></td>
    //           <td><{$return.user.bazi.2}></td>
    //           <td><{$return.user.bazi.4}></td>
    //           <td><{$return.user.bazi.6}></td></tr>
    items.value = [{
        bz:'天干',
        nz: res.value?.data?.return?.user?.bazi[0],
        yz: res.value?.data?.return?.user?.bazi[2],
        rz: res.value?.data?.return?.user?.bazi[4],
        sz: res.value?.data?.return?.user?.bazi[6],
        class: 'bg-[#fcf5e5]'
        }, {
        bz: '地支',
        nz: res.value?.data?.return?.user?.bazi[1],
        yz: res.value?.data?.return?.user?.bazi[3],
        rz: res.value?.data?.return?.user?.bazi[5],
        sz: res.value?.data?.return?.user?.bazi[7],
        class: 'bg-[#eedec7]'
    }]

    lnys.value = res.value?.data?.return?.sx?.yf;

    rglm.value = res.value?.data?.rglm;
    // console.log(rglm.value)
    // console.log(rglm.value)
    tywh.value = res.value?.data?.info?.tywh;

    myq_text.value = res.value?.data?.myq_text;

    nameList.value = res.value?.data?.name_list

    fengshui_list.value = res.value?.data?.fengshui_list
    // console.log(fengshui_list.value)
  } catch (err) {
    console.error(err)
  }
}

onMounted(() => {
  getResult()
})


</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/fengshui'"/>
    <!-- 自适应背景图 -->
    <img 
      src="/assets/images/fengshui/result.png" 
      alt=""
      class="w-full h-auto object-contain"
    />
    <div class="absolute w-full top-[43%]">
      <div class="flex flex-col justify-between md:gap-10 space-y-5">
        <div class="relative w-[95%] left-0 right-0 mx-auto">
          <div>
            <img 
              src="/assets/images/fengshui/nidexinxi.png" 
              alt=""
              class="w-full h-auto object-contain"
            />
          </div>
          <div class="absolute top-[15%] left-0  right-0 w-[80%] mx-auto space-y-2 md:space-y-10">
            <div class="flex flex-col justify-between gap-2 md:gap-8">
              <div class="text-size-lg text-[#a48355] w-full">
                <span>姓名：</span>
                <span>{{username}}</span>
              </div>
              <div class="text-size-lg text-[#a48355] w-full">
                <span>性别：</span>
                <span>{{sex}}</span>
              </div>
              <div class="text-size-lg text-[#a48355] w-full">
                <span>出生公历：</span>
                <span>{{birthday}}</span>
              </div>
              <div class="text-size-lg text-[#a48355] w-full">
                <span>出生农历：</span>
                <span>{{birthday2}}</span>
              </div>
            </div>
            <div>
              <UTable :ui="{td:{padding:'py-2'}, thead:'border-none', tr:{base:'border-none'}}" :rows="items" :columns="columns">
                  <template #quantity-data="{ row }">
                      {{ row.quantity.value }}
                  </template>
              </UTable>
            </div>

            <div class="text-black">
              {{wxbzzl}}
            </div>
          </div>
          
        </div>
        <div class="bg-[#d5bb9b] space-y-5">
          <div class="relative w-[95%] left-0 right-0 mx-auto">
            <div>
              <img 
              src="/assets/images/fengshui/fxck.png" 
              alt=""
              class="w-[70%] left-0 right-0 mx-auto h-auto object-contain pb-8"
              />
            </div>
            <div class="w-[90%] left-0 right-0 mx-auto pt-5 pb-5 border-white border-5 text-[#6d3b22]">
                <div class="ml-[10%] mr-[10%]">
                    <p class="indent-8" v-html="fengshui_list?.xiangjie"></p>
                </div>
            </div>
          </div>

          <div class="relative w-[95%] left-0 right-0 mx-auto">
            <div>
              <img 
              src="/assets/images/fengshui/group-1.png" 
              alt=""
              class="left-0 right-0 mx-auto h-auto object-contain pb-8"
              />
            </div>
          </div>
          <div class="relative w-[95%] left-0 right-0 mx-auto">
            <div>
              <img 
              src="/assets/images/fengshui/group-2.png" 
              alt=""
              class="left-0 right-0 mx-auto h-auto object-contain pb-8"
              />
            </div>
          </div>
          <div class="relative w-[95%] left-0 right-0 mx-auto">
            <div>
              <img 
              src="/assets/images/fengshui/group-3.png" 
              alt=""
              class="left-0 right-0 mx-auto h-auto object-contain pb-8"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
